<template>
  <div class="home">
    <div class="course">
      <div class="kj">
        <ul>
          <li
            v-for="item in kj"
            :key="item.id"
            @mouseover="BorderBgColor(item.border)"
            @mouseleave="ClearBorderBgColor(item.id)"
          >
            <div class="ht">{{ item.title }}</div>
            <div class="border" :style="{ background: item.border }"></div>
            <span>{{ item.label }}</span>
            <div class="icon">
              <i class="el-icon-right"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="container">
      <!-- 新闻卡片 -->
      <el-row>
        <el-col :span="11">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span class="card-ht">学校新闻</span>
              <span>NEWS</span>
              <el-button
                style="float: right; padding: 12px 0; color: #000"
                type="text"
              >
                <span class="text"
                  >更多 <i class="el-icon-arrow-right"></i>
                </span>
              </el-button>
            </div>
            <ul class="item item1">
              <li v-for="item in News" :key="item.id">
                <div class="item1-left">
                  <img :src="item.img" alt="" />
                </div>
                <div class="item1-right">
                  <a href="javascript:;" class="text">{{ item.title }}</a>
                  <br />
                  <br />
                  <span>{{ item.label }}</span>
                </div>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="2">&ensp; </el-col>
        <!-- 公告卡片 -->
        <el-col :span="11">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span class="card-ht">学校公告</span>
              <span>MEWS</span>
              <el-button
                style="float: right; padding: 12px 0; color: #000"
                type="text"
                ><span class="text"
                  >更多 <i class="el-icon-arrow-right"></i></span
              ></el-button>
            </div>
            <ul class="item item2">
              <li v-for="item in Announcement" :key="item.id">
                <a href="javascript:; " class="text">{{ item.title }}</a>
                <span class="time">{{ item.date }}</span>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>

      <!-- 展示栏卡片 -->
      <div class="panel">
        <ul>
          <li v-for="item in Displaypanel" :key="item.id">
            <div class="ht">
              {{ item.title }}
            </div>
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="hb">
              {{ item.label }}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myHome',
  data() {
    return {
      // 课程卡片数据
      kj: [
        {
          id: 0,
          title: '工商企业管理',
          label: 'Politics of the firm',
          border: '#ff7f00'
        },
        {
          id: 1,
          title: '电子商务',
          label: 'Electronic Commerce',
          border: 'yellow'
        },
        {
          id: 2,
          title: '物流管理',
          label: 'Physical distribution management',
          border: '#00ff00'
        },
        {
          id: 3,
          title: '市场营销',
          label: 'Physical distribution management',
          border: '#00ffff'
        },
        {
          id: 4,
          title: '国际商务',
          label: 'International business',
          border: 'blue'
        },
        {
          id: 5,
          title: '大数据于会计',
          label: 'Accounting',
          border: '#8B00FF'
        },
        {
          id: 6,
          title: '大数据与财务管理',
          label: 'Financial management',
          border: 'red'
        }
      ],
      // 清空 数组边框颜色后，鼠标经过要重新添加
      listBorder: [
        '#ff7f00',
        'yellow',
        '#00ff00',
        '#00ffff',
        'blue',
        '#8B00FF',
        'red'
      ],
      // 学校新闻
      News: [
        {
          id: 0,
          img: '"https://s2.loli.net/2022/06/10/kDLaA9oKjCVRf5J.jpg',
          title: '扬帆启航行致远  凝心聚力谱新篇',
          label:
            '亲爱的商学院2019级全体同学大家好！大家辛苦了！光阴如梭，年岁更替，2022年即将到来，值此辞旧...'
        },
        {
          id: 1,
          img: 'https://s2.loli.net/2022/06/10/T1AW9oJpVCbFIiw.jpg',
          title: '商学院课程思政教学竞赛',
          label:
            '为了贯彻落实习近平新时代中国特色社会主义思想，进一步加强思想政治工作，坚持立德树人，发挥教师队伍...'
        },
        {
          id: 2,
          img: 'https://s2.loli.net/2022/06/10/QCmrVUOcKjsWeBI.jpg',
          title: '商学院召开课程思政建设推进会',
          label:
            '10月27日，商学院班子、办公室成员、专业带头人(专业负责人)、教师代表等在部门会议室召开商学院课程思...'
        },
        {
          id: 3,
          img: 'https://s2.loli.net/2022/06/10/TrFvz7p4SxLuQH8.jpg',
          title: '商学院党总支学生党支部开展“学史明理...',
          label:
            '为深入开展党史学习教育，弘扬伟大的抗美援朝精神，缅怀革命先辈，厚植家国情怀，强化理想信念，增强队...'
        }
      ],
      // 学校公告数组
      Announcement: [
        {
          id: 0,
          title: '市场营销人才培养方案',
          date: '2021-2-5'
        },
        {
          id: 1,
          title: '工商管理系2020届广西机电职业技术学院优秀毕业生...',
          date: '2021-2-5'
        },
        {
          id: 2,
          title: '《关于开展2018-2019学年度家庭经济困难学生认定工...',
          date: '2021-2-5'
        },
        {
          id: 3,
          title: '工商管理系2020届广西机电职业技术学院优秀毕业生',
          date: '2021-2-5'
        },
        {
          id: 4,
          title: '关于成立2019年招生宣传工作小组成员的通知',
          date: '2021-2-5'
        },
        {
          id: 5,
          title: '关于成立2018年招生宣传工作小组成员的通知公示',
          date: '  2021-2-5'
        },

        {
          id: 6,
          title: '关于成立2018年招生宣传工作小组成员的通知公示',
          date: '2021-2-5'
        },
        {
          id: 7,
          title: '关于成立2019年招生宣传工作小组成员的通知',
          date: '2021-2-5'
        },
        {
          id: 8,
          title: '关于成立工商管理系2018-2019学年度家庭经济困难学...',
          date: '2021-2-5'
        },
        {
          id: 9,
          title: '关于成立2019年招生宣传工作小组成员的通知',
          date: '2021-2-5'
        }
      ],

      // 展示栏
      Displaypanel: [
        {
          id: 0,
          title: '学院荣誉',
          img: 'https://s2.loli.net/2022/06/10/3qSJEMBcLZX8Tho.jpg',
          label: '2016年全国职业院校技能大赛高职组市场...'
        },
        {
          id: 1,
          title: '学生风采',
          img: 'https://s2.loli.net/2022/06/10/UMp3KYkmzwJitIc.jpg',
          label: '我院学生在学院晚会中的精彩演出'
        },

        {
          id: 2,
          title: '校友风采',
          img: 'https://s2.loli.net/2022/06/10/wcArUK73loju8eb.png',
          label: '工商企业管理专业优秀毕业生——黄俊凯'
        }
      ]
    }
  },
  computed: {},
  methods: {
    // 清空 kj  数组里的边框颜色
    BorderBgColor(val) {
      this.kj.findIndex((item) => {
        if (item.border == val) {
          item.border = 'red'
        }
      })
    },
    // 将 listBorder 数组的颜色 重新赋值给 kj 数组
    ClearBorderBgColor(id) {
      this.kj.filter((item) => {
        if (item.id == id) {
          item.border = this.listBorder[id]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.course {
  width: 100%;
  height: 241px;
  background: #eee;
  margin-bottom: 20px;
  .kj {
    width: 1200px;
    height: 100%;
    margin: 0 auto;

    li {
      float: left;
      width: 171.4px;
      height: 241px;
      border-left: 1px solid #ccc;

      padding: 50px 20px;
      &:hover span,
      &:hover .ht,
      &:hover .icon .el-icon-right {
        color: red;
      }

      .ht {
        font-weight: 700;
        font-size: 20px;
        color: #000;
        margin-bottom: 10px;
      }
      .border {
        width: 130px;
        height: 3px;
      }
      span {
        font-size: 12px;
        color: rgb(166, 164, 164);
      }

      .icon {
        width: 25px;
        height: 20px;
        margin-top: 25px;
        margin-left: 100px;
        font-size: 20px;
        line-height: 20px;
        i {
          color: rgb(148, 148, 148);
        }
      }

      .i:nth-child(2) {
        position: absolute;
        top: 0;
      }
    }
  }
}
.container {
  width: 1200px;
  margin: 0 auto;
}

// 卡片样式
.item {
  font-size: 14px;
  .text {
    color: #000;
  }
}
.item1 {
  // margin-top: -20px;
  li {
    width: 100%;
    height: 100px;
    &:nth-child(1) {
      margin-top: 15px;
    }

    .item1-left {
      float: left;
      width: 155px;
      height: 85px;
      background: #ccc;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .item1-right {
    float: left;
    width: 337px;
    height: 85px;
    margin-left: 8px;
    .text {
      font-size: 18px;
    }
    span {
      font-size: 12px;
      color: rgb(109, 108, 108);
    }
  }
}
.item2 {
  // margin-top: -20px;
  li {
    list-style-type: disc !important;
    width: 100%;
    height: 41px;
    line-height: 41px;
    border-bottom: 1px dashed #ccc;
    &:hover {
      border-bottom: 1px dashed red;
    }
    .time {
      float: right !important;
      font-size: 12px;
    }
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.clearfix {
  margin-bottom: -5px;
}

.box-card {
  border: none;
}
// .box-card:nth-child(1) {
//   padding-right: 25px;
// }
// .box-card:nth-child(2) {
//   padding-left: 25px;
// }

.card-ht {
  font-weight: 700;
  font-size: 24px;
  border-bottom: 4px solid #cc0000;
  margin-right: 3px;
}
.text:hover {
  color: red;
}
/deep/ .el-card__header,
/deep/.el-card__body {
  padding: 0;
}

.panel {
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 70px;
  width: 100%;
  height: 289.5px;

  ul {
    width: 100%;
    height: 100%;

    li {
      float: left;
      width: 30%;
      height: 100%;
      background: red;
      &:nth-child(2) {
        margin: 0 5%;
      }

      .ht {
        height: 45px;
        background: #003b8f;
        text-align: center;
        line-height: 45px;
        color: #fff;
      }

      .img {
        height: 209.5px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .hb {
        height: 35px;
        background: #eee;
        text-align: center;
        line-height: 35px;
        &:hover {
          color: red;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
